<template lang="html">
  <header>
    <ul id="mind_tab">
      <li :class="{selected:switchShow.showEditMenu}">
        <a href="javascritp:;" class="btn-showEditMenu" @click="showMenu">思维导图</a>
      </li>
      <li :class="{selected:switchShow.showViewMenu}">
        <a href="javascritp:;" class="btn-showViewMenu" @click="showMenu">外观样式</a>
      </li>
      <li :class="{selected:switchShow.showPreView}">
        <a href="javascritp:;" class="btn-showPreView" @click="showMenu">预览</a>
      </li>
    </ul>
    <div id="mind_tab-content">
      <div class="mind-tab-panel" v-show="switchShow.showEditMenu">
        <edit-menu></edit-menu>
      </div>
      <div class="mind-tab-panel" v-show="switchShow.showViewMenu">
        <view-menu></view-menu>
      </div>
    </div>
  </header>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import editMenu from "./top_menu/edit_menu/edit_menu";
import viewMenu from "./top_menu/view_menu/view_menu";
export default {
  name: "headerVue",
  data() {
    return {
      switchShow: {
        showEditMenu: true,
        showViewMenu: false,
        showPreView: false
      }
    };
  },
  computed: {
    ...mapGetters({
      minder: "getMinder",
      view: "getView"
    })
  },
  components: {
    editMenu,
    viewMenu
  },
  methods: {
    ...mapMutations(["setView"]),
    showMenu: function(e) {
      for (var variable in this.switchShow) {
        if (this.switchShow.hasOwnProperty(variable)) {
          this.switchShow[variable] = false;
        }
      }
      if (e.target.className === "btn-showPreView") {
        this.setView(true);
        if(!this.minder.queryCommandState('hand')){
          this.minder.execCommand("hand");
        }
      }else if(this.view){
        if(this.minder.queryCommandState('hand')){
          this.minder.execCommand("hand");
        }
        this.setView(false);
      }
      this["switchShow"][e.target.className.replace("btn-", "")] = true;
    }
  }
};
</script>

<style lang="scss">
@import "../style/header.scss";
</style>
